modal window実験

背景

2022-08-26

14:34:51 単なるprogramのミスだった

code:app.tsx

/// <reference no-default-lib="true" />

/// <reference lib="esnext" />

/// <reference lib="dom" />

/** @jsx h */

/** @jsxFrag Fragment */

import { Fragment, h, render, useCallback, useState, useMemo, useEffect, useRef, ComponentChildren } from "./preact.tsx";

import {

encodeTitleURI,

sleep,

} from "../scrapbox-userscript-std/dom.ts";

const App = () => {

const handleClick = useCallback((e) => {

console.debug(e.target);

console.debug(e.currentTarget);

if (e.target.id !== "background") return;

setClosed(true);

}, []);

return (<>

<style>{`

.modal {

position: fixed;

inset: 0;

z-index: 1050;

display: flex;

justify-content: center;

background-color: rgba(0,0,0,.8);

}

.closed {

display: none;

}

.content {

width: 600px;

margin: 30px auto;

border: 1px solid rgba(0,0,0,.2);

border-radius: 6px;

}

`}</style>

<div className="content">

テスト

</div>

</div>

</>)

};

const app = document.createElement("div");

const shadowRoot = app.attachShadow({ mode: "open" });

document.body.append(app);

render(<App />, shadowRoot);

code:preact.tsx